<template>
	<NavBar :obj="{ title: '申请代理', color: '#000', backgroundColor: '#fff', dark: true }" />

	<view class="layout-box">
		<view class="layout">
			<view class="label">代理类型</view>
			<view class="inp" @click="typeShow = true">{{ chosTitle }}</view>
			<u-icon name="arrow-down" color="#333" size="16" class="arrow-down"></u-icon>
		</view>
	</view>

	<view class="layout-box" v-if="formRef.type == 2">
		<view class="layout">
			<view class="label">姓名</view>
			<input class="inp" placeholder-class="place-inp" placeholder="请填写姓名" v-model="formRef.name" />
		</view>
		<view class="layout">
			<view class="label">联系方式</view>
			<input class="inp" placeholder-class="place-inp" placeholder="请填写联系方式" v-model="formRef.contact" />
		</view>

		<view class="layout">
			<view class="label">营业执照</view>
			<Upload v-model="files" :maxCount="1" @change="handleChange" />
		</view>
	</view>

	<view class="layout-box" v-else>
		<view class="layout">
			<view class="label">企业名称</view>
			<input class="inp" placeholder-class="place-inp" placeholder="请填写企业名称" v-model="formRef.business_name" />
		</view>
		<view class="layout">
			<view class="label">企业法人</view>
			<input class="inp" placeholder-class="place-inp" placeholder="请填写企业法人" v-model="formRef.legal_person" />
		</view>
		<view class="layout">
			<view class="label">联系方式</view>
			<input class="inp" placeholder-class="place-inp" placeholder="请填写联系方式" v-model="formRef.contact" />
		</view>

		<view class="layout">
			<view class="label">营业执照</view>
			<Upload v-model="files" :maxCount="1" @change="handleChange" />
		</view>
	</view>

	<view class="layout-box">
		<view class="layout">
			<view class="label">备注</view>
			<textarea class="inp textarea" placeholder-class="place-inp" placeholder="备注内容(选填)" v-model="formRef.desc"></textarea>
		</view>
	</view>

	<view class="m-30" v-if="info.reject_msg">
		<view style="color: red">驳回原因：{{ info.reject_msg }}</view>
	</view>

	<view class="fixed-bottom">
		<view class="btn" @click="agentApply" :class="{ gray: info && info.status == 1 }">
			<text v-if="!info || info.status == 3">提交申请</text>
			<text v-if="info.status == 1">审核中</text>
			<text v-if="info.status == 2">您已是代理</text>
		</view>
	</view>

	<u-picker :defaultIndex="defaultIndex" :show="typeShow" :columns="typeList" @cancel="typeShow = false" @confirm="confirm" keyName="title" confirmColor="#FB3204"></u-picker>
</template>

<script setup>
	import { ref, nextTick, reactive } from 'vue';
	import { port, goUrl, hint, loading, closeLoading, goBack, goIndex } from '../../service/port';
	import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
	import Upload from '/components/Uploads.vue';
	const typeShow = ref(false);
	const chosTitle = ref('社区代理');
	const defaultIndex = ref([0]);
	const typeList = ref([
		[
			{
				title: '社区代理',
				type: 2
			},
			{
				title: '区县代理',
				type: 3
			}
		]
	]);
	const info = ref('');

	const formRef = ref({
		id: '',
		type: 2,
		name: '',
		contact: '',
		business_name: '',
		legal_person: '',
		business_license: '',
		desc: ''
	});

	const files = ref([]);
	const handleChange = (event) => {
		const images = files.value.map((i) => {
			return i.url;
		});
		formRef.value.business_license = images.length > 0 ? images.join(',') : '';
	};

	function confirm(e) {
		formRef.value.type = e.value[0].type;
		chosTitle.value = e.value[0].title;
		typeShow.value = false;
	}

	onShow(() => {
		getAgentApply();
	});

	async function getAgentApply() {
		loading();
		let res = await port('getAgentApply');
		closeLoading();
		if (res.data) {
			info.value = res.data;

			formRef.value = {
				type: res.data.type,
				name: res.data.name,
				contact: res.data.contact,
				business_name: res.data.business_name,
				legal_person: res.data.legal_person,
				business_license: res.data.business_license,
				desc: res.data.desc
			};
			files.value = [{ url: res.data.business_license }];
			
			typeList.value[0].map((v, i) => {
				
				if (v.type == res.data.type) {
					defaultIndex.value = [i];
					chosTitle.value = v.title;
				}
			});
		}
	}

	async function agentApply() {
		if (!info.value || info.value.status == 3) {
			loading();
			let res = await port('agentApply', formRef.value);
			nextTick();
			closeLoading();
			hint(res.msg);
			getAgentApply();
		}
	}
</script>

<style scoped lang="scss">
	:global(page) {
		background-color: #f4f5f8;
	}
	.gray {
		background: gray;
	}

	.layout-box {
		background: #ffffff;
		border-radius: 20rpx;
		margin: 26rpx 30rpx;
		padding: 0 23rpx;
		.layout {
			padding: 30rpx 0;
			border-bottom: 1rpx solid #eeeeee;
			display: flex;

			justify-content: space-between;
			&:last-child {
				border-bottom: none;
			}
			.label {
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				width: 27%;
			}
			.inp {
				font-size: 28rpx;
				color: #333333;
				flex: 1 1 0%;
			}
			.place-inp {
				color: #bdbdbd;
				flex: 1 1 0%;
			}
			.textarea {
				height: 120rpx;
			}
			.icon {
				margin-right: 30rpx;
			}
		}
	}
</style>
